/**
*@description 粉丝地域
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { browserHistory } from 'dva/router';
import styles from '../../routes/BusinessData.less';
import ReactEcharts from 'echarts-for-react';
import toExcel from '../../utils/toExcel';
import downImg from '../../utils/downImg';
import {Card, Icon, Tooltip, Row, Col} from 'antd';


const Phone = ({data, dispatch,loading }) => {
  let option = {
      tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      // color:[ '#606d7a','#ceb180','#606d7a','#ebc44b','#51b9f2','#28d8b2'],
      series: [
          {
              name:'手机号用户购买渠道统计',
              type:'pie',
              // selectedMode: 'single',
              radius: [0, '30%'],
              color:[ '#606d7a','#ceb180'],
              label: {
                  normal: {
                      position: 'inner'
                  }
              },
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              data:[
                  {value:data.Unpurchase, name:'未购买'},
                  {value:data.purchase, name:'购买'},
              ]
          },
          {
              name:'手机号购买渠道统计',
              type:'pie',
              radius: ['40%', '55%'],
              color:['#e2d7c2','#ebc44b','#51b9f2','#28d8b2'],
              data:[
                  {value:data.Unpurchase, name:'未购买'},
                  {value:data.PosValue, name:'只在Pos购买'},
                  {value:data.TmallValue, name:'只在Tmall购买'},
                  {value:data.MEMBERNOORDERNUM, name:'交易信息缺失的老会员'},
                  {value:data.PosTmallValue, name:'Pos&Tmall均购买'},
                  
              ]
          }
      ]
  }

  function exExcel(){
    var title = ['购买渠道','数量','占比'];
    var datas = [
                    ['只在POS购买',data.PosValue,data.PosPct],
                    ['只在Tmall购买',data.TmallValue,data.PosTmallPct],
                    ['POS&Tmall均购买',data.PosTmallValue,data.PosTmallPct],
                    ['未购买',data.Unpurchase,data.unpurachasePct],
                ];
    
    toExcel(title, "手机号用户购买渠道分布", datas);
  }

  let tit = (<div><p>（1）    购买：截止至昨日，蜜丝佛陀留有手机号码的用户中有购买行为的人数。</p>
              <p>（2）    未购买： 截止至昨日，蜜丝佛陀留有手机号码的用户中无购买行为的人数。</p>
              <p>（3）    只在POS购买：截止至昨日，蜜丝佛陀留有手机号码的用户中只在线下门店有购买行为的人数。</p>
              <p>（4）    只在Tmall购买：截止至昨日，蜜丝佛陀留有手机号码的用户中只在线上Tmall有购买行为的人数。</p>
              <p>（5）    POS&Tmall均购买：截止至昨日，蜜丝佛陀留有手机号码的用户中在线下门店和线上Tmall均有购买行为的人数。</p>
              <p>（6）    交易信息缺失的老会员：截止至昨日，蜜丝佛陀留有手机号码并有过购买行为的用户中没有订单数据关联，因而不确定购买渠道的人数。</p></div>)

  return (
    <div className={styles.box}>
        <h3>手机号用户购买渠道分布&nbsp;
                    <Tooltip placement="right" title={tit}>
                      <Icon type="question-circle-o" className={styles.anticon}/>
                    </Tooltip></h3>
        <div className={styles.box_wrap}>
        <div className={styles.downloads}>
                <span className={styles.dimg} onClick={downImg.bind(this,'phone','手机号用户购买渠道分布')}></span>
                <span className={styles.desl} onClick={exExcel.bind(this)}></span>
            </div>
        <div className={styles.chart_left} id="phone">
          <ReactEcharts
            option={option} 
            height={300} 
            showLoading={loading}
            />
        </div>
        <div className={styles.chart_right}>            

      <table className={styles.chart_tab} style={{margin:"50px 0px 0px 50px"}}>
            <tbody>
        <tr>
          <td>购买渠道</td>
          <td>数量</td>
          <td>占比</td>
        </tr>
        <tr>
          <td>只在POS购买</td>
          <td className={styles.tdright}>{parseInt(data.PosValue).formatMoney()}</td>
          <td className={styles.tdright}>{data.PosPct}%</td>
        </tr>
        <tr>
          <td>只在Tmall购买</td>
          <td className={styles.tdright}>{parseInt(data.TmallValue).formatMoney()}</td>
          <td className={styles.tdright}>{data.TmallPct}%</td>
        </tr>
        <tr>
          <td>POS&Tmall均购买</td>
          <td className={styles.tdright}>{parseInt(data.PosTmallValue).formatMoney()}</td>
          <td className={styles.tdright}>{data.PosTmallPct}%</td>
        </tr>
        <tr>
          <td>交易信息缺失的老会员</td>
          <td className={styles.tdright}>{parseInt(data.MEMBERNOORDERNUM).formatMoney()}</td>
          <td className={styles.tdright}>{data.MEMBERNOORDERRATE}%</td>
        </tr>
        
        <tr>
          <td>未购买</td>
          <td className={styles.tdright}>{parseInt(data.Unpurchase).formatMoney()}</td>
          <td className={styles.tdright}>{data.unpurachasePct}%</td>
        </tr>
                </tbody>
      </table>
      <p className={styles.shuoming}>
      POS&Tmall重合率为{data.posTmall}%<br/>
      *注：重合率 ：在两个渠道都购买过的人群占所有<br/>
购买人群的比例
      </p>
        </div>
        </div>
      </div>
  );
};

Phone.propTypes = {
    // data: PropTypes.array
};

export default connect()(Phone);